<template>
  <div class="buy_five">
    <div class="tooltip_text">
      <el-tooltip effect="light" placement="bottom-end" popper-class="mytooltip">
        <div slot="content">
          <!-- 兑换码一次只能使用一个； <br /> -->
          每次只能使用一张优惠券
          <br />不支持IOS系统使用
        </div>
        <img class="icon" src="@/assets/meng/search_result04.png" alt />
      </el-tooltip>
    </div>
    <div class="coupon_wrap">
      <div class="coupon_box" v-for="(item) in unusedList" :key="item.id">
        <div class="full_minus">满减券</div>
        <div class="coupon_cont_box">
          <div class="coupon_left">
            <div class="money">￥<span>{{item.amount}}</span></div>
            <div class="tips">满{{item.enough}}元可用</div>
          </div>
          <div class="coupon_right">
            <span v-if="!item.isGive" class="go_give" @click="giveAway(item)">去赠送</span>
            <span v-else class="no_give">不可赠送</span>
          </div>
        </div>
      </div>
    </div>
    <div class="no_data" v-if="!unusedList.length">
      <img src="@/assets/shi/zanwushuju.png" alt />
      <div>您暂时没有优惠券哦~</div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="460px" top="35vh" :close-on-click-modal="false">
      <div class="buy_five_wrapper">
        <div class="pop_title">优惠券赠送</div>
        <div class="pop_container">
          <el-input  v-model="phoneNum" type="text" placeholder="请输入受赠方的手机号码"></el-input>
          <div class="sc_cont_item">
            <div class="sc_tag">满减券</div>
            <div class="main_left">
              <div>
                <span class="span1">￥</span>
                <span class="span2">200</span>
                <span class="span3">满500元可用</span>
              </div>
            </div>
          </div>
          <div class="pop_btn" @click="give">赠送</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    props: {},
    data() {
        return {
          dialogVisible: false,
          phoneNum: '',
          unusedList: [], //未使用的优惠券列表
          usedList: [], //已使用的优惠券列表
          giveItem: null,
          couponList: [],
          isClick: true, //赠送按钮.赠送期间不可再次点击
        };
    },
    computed: {},
    created() {
      this.getCoupon()
      
    },
    mounted() {},
    watch: {
      dialogVisible(){
        this.phoneNum = ""
      },
      phoneNum(nVal){
        let reg = /^[0-9]*$/;
        if(reg.test(nVal)){
          this.phoneNum = this.phoneNum.slice(0,11);
        }else{
          this.phoneNum = nVal.slice(0,nVal.length-1);
        }
      }
    },
    methods: {
      //获取优惠券列表
      getCoupon(){
        this.couponList = []
        this.$axios.get("/api/customer/GetCoupon",{
          params:{ type: 0 }
        }).then(res=>{
          if(!res.data.code){
            this.couponList = res.data.data;
            this.usedAndUnused()
          }
        })
      },
      // 区分已使用的优惠券和未使用的优惠券
      usedAndUnused(){
        this.usedList = [];
        this.unusedList = [];
        this.couponList.forEach(item => {
          if(item.status){
            this.usedList.push(item)
          }else{
            this.unusedList.push(item)
          }
        });
      },
      //去赠送
      giveAway(item){
        this.giveItem = item;
        this.dialogVisible=true;

      },
      // 赠送
      give(){
        if(!this.isClick) return false;
        this.isClick = false;
        this.$axios.post("api/customer/GiveCouponOther",{
          id: this.giveItem.id,
          Mobile: this.phoneNum
        }).then(res=>{
          this.isClick = true;
          if(!res.data.code){
            this.$message({
              message: '赠送成功',
              type: 'success'
            });
            this.dialogVisible=false;
            this.getCoupon()
          }else{
            if (document.getElementsByClassName("el-message").length === 0) {
              this.$message.error(res.data.msg);
            }
          }
        })
      }
    },
    components: {},
};
</script>

<style scoped lang="less">
.buy_five{
  width: 100%;
  height: 100%;
  padding: 20px 21px 0 ;
  box-sizing: border-box;
  position: relative;
  .tooltip_text{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    img{
      vertical-align: middle;
      width: 100%;
      height: 100%;
    }
    .text{
      margin-top: 10px;
    }
  }
}
.coupon_wrap{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.coupon_box{
  // width: 380px;
  width: 22.5%;
  height: 108px;
  background: url("~@/assets/shi/coupon.png") no-repeat;
  background-size: 100% 100%;
  margin:0 30px 30px 0;
  position: relative;
  .full_minus{
    position: absolute;
    left: 0;
    top: 0;
    width: 64px;
    line-height: 26px;
    font-size: 14px;
    color: #895343;
    border-radius: 4px 0 14px 0;
    background-color: #e9d2a9;
    text-align: center;
  }
  .coupon_cont_box{
    width: 100%;
    height: 100%;
    display: flex;
  }
  .coupon_left{
    width: 246px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .money{
      font-size: 18px;
      color: #8a5443;
      span{
        font-family: DINAlternate-Bold;
        font-size: 40px;
        font-weight: 600;
        color: #8a5443;
      }
    }
    .tips{
      font-size: 14px;
      color: #895342;
    }
  }
  .coupon_right{
    width: 133px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .go_give{
      width: 80px;
      line-height: 32px;
      text-align: center;
      background-color: #8a5443;
      border-radius: 4px;
      font-size: 14px;
	    color: #ffffff;
      cursor: pointer;
    }
    .go_give:hover{
      background-color: #a36b59;
    }
    .no_give{
      font-size: 14px;
      color: #895343;;
    }
  }
}
@media screen and (max-width: 1600px) {
  .coupon_box {
    width: 30%;
  }
}
.buy_five /deep/.el-dialog{
  border-radius: 4px;
}
.no_data{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #b5b5b5;
  img{
    width: 218px;
    height: 176px;
  }
}
.buy_five_wrapper{
  width: 100%;
  height: 334px;
  box-shadow: 0px 0px 12px 0px 
		rgba(200, 198, 198, 0.5);
	border-radius: 4px;
  padding: 23px 20px 0 ;
  box-sizing: border-box;
  .pop_title{
    font-size: 16px;
    font-weight: 600;
    color: #222222;
    display: flex;
    align-items: center;
  }
  .pop_title::before{
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #ee7d2f;
    border-radius: 2px;
    margin-right: 4px;
  }
  .pop_container{
    width: 360px;
    margin: 30px auto 0;
    /deep/.el-input__inner{
      height: 45px;
      line-height: 45px;
    }
  }
  .sc_cont_item{
    position: relative;
    width: 360px;
    height: 80px;
    display: flex;
    justify-content: space-between;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 10px;
    background: url("~@/assets/shi/coupon01.png") no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
    .sc_tag{
      position: absolute;
      left: 1px;
      top: 1px;
      width: 64px;
      line-height: 26px;
      text-align: center;
      font-size: 14px;
      color: #895343;
      background-color: #e9d2a9;
      border-radius: 0 0px 14px 0px;
    }
    .main_left{
      height: 100%;
      display: flex;
      align-items: center;
      padding-left: 77px;
      box-sizing: border-box;
      .span1{
        font-size: 18px;
        color: #8a5443;
      }
      .span2{
        font-family: PingFangSC-Regular;
        font-size: 40px;
        color: #8a5443;
      }
      .span3{
        font-size: 14px;
        color: #895342;
      }
    }
  }
  .pop_btn{
    width: 100%;
    line-height: 50px;
    text-align: center;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background-color: #ed8641;
	  border-radius: 4px;
    cursor: pointer;
  }
}
</style>
